<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no" />
		<title>商家首页</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<style>
			body{
				font-size: 14px;
			}
			/*//头部*/
			.aui-bar{
				background: #fff;
			}
			.aui-tab-nav li.active {
				color: #327afa;
				border-bottom: 2px #327afa solid;
			}
			.iConent:before {
				content: "\e700" !important;
			}
			.aui-tab-nav li {
				font-size:15px;
				border-bottom:1px dotted #eee;
			}
			.aui-bar .search{
				height: 35px !important;
				margin:5px 0 !important;
				padding-left:35px;
				background: #f4f3f3;
				border:none;
				border-radius: 5px;
			}
			.divSeach{
				position: relative;
				width:70% !important;
				height: 45px;
				float: left;
				margin-left: 8px;
			}
			.touxiang img{
				width: 63px;
				height: 63px;
			}
			.aui-bar .aui-iconfont.aui-icon-search {
				position: absolute;
				left:0;
				color:#b0b0ae;
			}
			.aui-bar .aui-iconfont{
				color:#b0b0ae;
			}
			.headerRight{
				overflow:hidden;
			}
			.headerRight i:first-of-type{
				width:50%;
			}
			.my-info{
				width: 100%;
				position: relative;
				height: 130px;
			}
			.headerPic{
			}
			.headerPic img{
				width: 100%;
				display: inherit;
				height: 130px;
			}
			.myInfoList{
				position: absolute;
				bottom:0;
				width: 100%;
				background: rgba(0,0,0,.5);
				overflow: hidden;
				height:63px;
			}
			.myInfoList .touxiang{
				float: left;
			}
			.myInfoList ul{
				height: 100%;
			}
			.myInfoList li{
				float: left;
				height: 100%;
				text-align: left;
				font-size: 14px;

			}
			.newPro{
				background: #f3f3f3;
			}
			.companyName{
				line-height: 30px;
			}
			.year{
				display: block;
				line-height: 22px;
			}
			.infoLeft{
				margin-left: 10px;
				width: 36%;
			}
			.infoRight{
				margin-top: 8px;
				/*margin-right: 30px;*/
				font-size: 12px !important;
				width: 41%;
			}
			.fensi{
				float: left;
				line-height: 15px;
				width: 50px;
				text-align: center;
				margin-right: 5px;
				margin-top: 8px;
			}
			.num{
				width: 100%;
				display: block;
			}
			.shoucang{
				border-radius: 5px !important;   
				margin-bottom: 4px;
			    width: 65px  !important;
			    height: 30px !important;
			    line-height: 30px !important;
		        background-color: #3498db;
			    font-size: 14px;
			    height: 45px;
			    line-height: 45px;
			    margin: 0;
			    border: none;
			    cursor: pointer;
		        padding:0 !important;
		        display: inline-block;
		        text-align: center;
		        vertical-align:middle;
			}
			#headerFooter{
				position:relative;
				line-height: 20px;
			}
			#aui-footer{
				height: 45px;
				line-height: 45px;
				font-size: 14px;
			}
			.allType{
				display: none;
			}
	        .zfTitle {
	            padding-left: 10px;
	            font-size: 14px;
	            border-left: 3px solid #327afa;
				color:#000;
				text-align: left;
	        }
	        .more{
	        	font-size: 12px !important;
	        }
	        .allPro,.newPro,.newInfo{
	        	display: none;
	        }
	        footer.aui-nav .aui-bar-tab p{
	        	font-size: 14px;
	        }
	        footer .aui-bar-tab li{
	        	position: relative;
	        }
	        footer .aui-bar-tab li:first-of-type:before{
				content:"";
				position: absolute;
				width: 1px;
				background: #8f8f94;
				right:0;
				top:20%;
				bottom:20%;
	        }
	        /*公司信息弹出*/
	        .myPicker{
	            position: fixed;
	            top: 45px;
	            /*-webkit-transform: translateY(100%);*/
	            right: 0;
	            overflow:hidden; 
	            -webkit-transition:  1s;
	            transition:  1s;
	            width: 0;
	            height: 0;
	            color:#000;
	            text-align: left;
	            font-size: 14px;
	            z-index: 9999;
	        }
	        .pickAnimate{
	            /*-webkit-transform: translateY(-100px);*/
	            width: 100%;
	            height: 90px;
	        }
	        .myPicker .aui-iconfont {
	        	color:#000 !important;
	        	font-size: 20px !important;
	        }
	        .myPicker .aui-list-view-cell{
	        	overflow: hidden;
	        	padding:5px 2px;
	        }
	        .myPicker .aui-list-view i.aui-iconfont{
	        	margin-right: 2px;
	        }
	        .myPicker .aui-list-view{
	        	background: #f3f3f3;
	        }
	        .myPicker .aui-list-view:after{
	        	top: 97%;
	        }
		</style>
	</head>
	<body>
		<header class="aui-bar aui-bar-nav">
			<div>
				<div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
				<!-- <div class="aui-title">
					商家首页
				</div> -->
				<div class="divSeach">
				    <i class="aui-iconfont aui-icon-search aui-pull-left"></i>
				    <input type="search" class="search aui-pull-left" placeholder="请输入搜索内容" id="search-input">
			    </div>
			    <div class="headerRight">
				    <i class="aui-iconfont aui-icon-message aui-pull-left"></i>
				    <i class="aui-iconfont aui-icon-more aui-pull-left" tapmode onclick="showPicker()"></i>
				</div>

				
			</div>
			
			<div class="my-info">
				<div class="headerPic"><img src="../../image/header.jpg"></div>
				<div class="myInfoList">
					<ul>
						<li>
							<div class="touxiang">
								<img src="../../image/dongtai.jpg" alt="">
							</div>
						</li>
						<li class="infoLeft ">
							<div class="companyName aui-ellipsis-1">阿里巴巴有限公司公司</div>
							<span class="year">2年</span>
						</li>
						<li class="infoRight aui-pull-right">
							<div class="fensi">
								<span class="num ">560</span>
								粉丝数
							</div>
							<div class="shoucang   aui-btn-info">收藏</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="aui-nav " id="headerFooter">
				<ul class="aui-bar-tab">
					<li class="active" id="tabbar1" data-type="1" tapmode onclick="changeCheck(this)">
						<span class="aui-iconfont aui-icon-shop"></span>
						<p>
							店铺首页
						</p>
					</li>
					<li id="tabbar2" data-type="2"  tapmode onclick="changeCheck(this)">
						<span class="aui-iconfont aui-icon-sort"></span>
						<p>
							全部商品
						</p>
					</li>
					<li id="tabbar3"  data-type="3" tapmode onclick="changeCheck(this)">
						<span class="aui-iconfont ">NEW</span>
						<p>
							新品上架
						</p>
					</li>
					<li id="tabbar4"  data-type="4" tapmode onclick="changeCheck(this)">
						<span class="aui-iconfont aui-icon-read"></span>
						<p>
							店铺动态
						</p>
					</li>
				</ul>
			</div>
			<ul class="aui-tab-nav aui-border-t allPro">
				<li class="active" data-type="1" tapmode onclick="switchChange(this)">
					综合
				</li>
				<li data-type="2" tapmode onclick="switchChange(this)">
					新品
				</li>
				<li data-type="3" tapmode onclick="switchChange(this)">
					销量
				</li>
				<li data-type="4" tapmode onclick="switchChange(this)">
					价格
				</li>
				<li tapmode onclick="changeView(this)" view-type="bigPic">
					<i class="aui-iconfont aui-icon-cascades icon-left-coler"></i>
				</li>
			</ul>
        <div class="zfTitle indexPro  aui-border-b  aui-border-t">热销推荐<span class="aui-pull-right more">更多</span></div>
        <div class="zfTitle newPro  aui-border-b  aui-border-t">15天前<span class="aui-pull-right more">更多</span></div>
        <div class="zfTitle newInfo  aui-border-b  aui-border-t">最新动态</div>
		</header>
		<footer class="aui-nav" id="aui-footer">
			<ul class="aui-bar-tab">
				<li id="tabbar1" tapmode onclick="openToTwo('myType_win')">
					<p>
						商品分类
					</p>
				</li>
				<li id="tabbar2" tapmode onclick="openToTwo('comIntrol_win')">
					<p>
						公司介绍
					</p>
				</li>
			</ul>
			
		</footer>
		<div class="myPicker">
			<ul class="aui-list-view">
		        <li class="aui-list-view-cell">
		             <i class="aui-iconfont aui-icon-comment newMeg"></i><span>我的消息 </span>
		        </li>
		        <li class="aui-list-view-cell">
		             <i class="aui-iconfont aui-icon-home"></i><span>首页</span>
		        </li>
		    </ul>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
	<!-- <script type="text/javascript" src="../../script/mui.min.js"></script> -->
	<script type="text/javascript" src="../../script/mui.js"></script>
	<script type="text/javascript">
		apiready = function() {
			api.parseTapmode();
			var mobile = api.pageParam.mobile;
			var header = $api.dom('header');
			var footer = $api.dom('footer');
			//$api.fixStatusBar(header);
			api.setStatusBarStyle({
                  style : 'light'
            });
			var header_h = $api.offset(header).h;
			var footer_h = $api.offset(footer).h;
			var body_h = $api.offset($api.dom('body')).h - header_h-footer_h;
			api.openFrame({
				name : 'myShop_frm',
				url : 'myShop_frm.html',
				rect : {
					x : 0,
					y : header_h,
					w : 'auto',
					h : body_h
				},
				pageParam : {
					mobile : mobile
				},
				bounces : false,
				vScrollBarEnabled : false,
				hScrollBarEnabled : false
			});
		}
		function switchChange(obj) {
			$('.aui-tab-nav li').removeClass('active');
			$(obj).addClass('active');
			var type = $(obj).attr('data-type');
			api.sendEvent({
			    name: 'lizi_type',
			    extra: {
			        lizi_type: type
			    }
			})
		}
		//为了在下面的热门类别可以通用，单独出来
		function changeCheck(obj){
			$(obj).parent().find("li").removeClass("active");
			$(obj).addClass("active");
			//显示热销或者15天前那些
			var dataType=$(obj).attr("data-type");
			api.execScript({
				frameName:"myShop_frm",
				script:'showData('+dataType+')'
			})
			switch(dataType){
				case "1":
					$(".indexPro").css({"display":"block"});
					$(".allPro").css({"display":"none"});
					$(".newPro").css({"display":"none"});
					$(".newInfo").css({"display":"none"});
					break;
				case "2":
					$(".indexPro").css({"display":"none"});
					$(".allPro").css({"display":"-webkit-box"});
					$(".newPro").css({"display":"none"});
					$(".newInfo").css({"display":"none"});
					break;
				case "3":
					$(".indexPro").css({"display":"none"});
					$(".allPro").css({"display":"none"});
					$(".newPro").css({"display":"block"});
					$(".newInfo").css({"display":"none"});
					break;
				case "4":
					$(".indexPro").css({"display":"none"});
					$(".allPro").css({"display":"none"});
					$(".newPro").css({"display":"none"});
					$(".newInfo").css({"display":"block"});
					break;
				
			}
		}
		function changeView(obj) {
			var viewType = $(obj).attr("view-type");
			
			api.execScript({
		    	frameName: 'myShop_frm',
			    script: 'changeView("'+viewType+'")'
			});
				
			if (viewType == "bigPic") {
				//一行两列
				$(".aui-icon-cascades").addClass("iConent");
				$(obj).attr("view-type", "smallPic");
			} else if (viewType == "smallPic") {
				//一行一列
				$(".aui-icon-cascades").removeClass("iConent");
				$(obj).attr("view-type", "bigPic");
			}
		}
		// mui遮罩
		var mask;
		// 显示遮罩
		function showPicker(){
		    $(".myPicker").addClass("pickAnimate");
		    mask = mui.createMask(hidePicker);
		    mask.show();
		    //跨域执行子frame的显示mask
		    api.execScript({
		    	frameName:"myShop_frm",
		    	script:"showMask()"
		    })
		}
		// 关闭遮罩
		function hidePicker(){
		    $(".myPicker").removeClass("pickAnimate");
		    //跨域执行子frame的关闭mask
		    api.execScript({
		    	frameName:"myShop_frm",
		    	script:"hideFrmMask()"
		    })
		}
		//接收子frm执行的关闭遮罩
		function closeWinMask(){
			$(".myPicker").removeClass("pickAnimate");
			mask.myclose();
			//hidePicker();
		}
	</script>
</html>
